<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>导航栏</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <!-- 导航栏基本样式 -->
            <nav class="navbar navbar-expand-sm bg-light">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>

            <!-- 垂直导航栏 -->
            <nav class="navbar bg-light">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>

            <!-- 居中对齐导航栏 -->
            <nav class="navbar navbar-expand-sm bg-light justify-content-center">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <!-- 不同颜色导航栏 -->
            <nav class="navbar navbar-expand-sm bg-light navbar-light">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <nav class="navbar navbar-expand-sm bg-success navbar-dark">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>
            <!-- bg-warning bg-danger -->
            <nav class="navbar navbar-expand-sm bg-info navbar-dark">
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航链接一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航链接三</a>
                        </li>
                  </ul>
            </nav>

            <!-- 品牌logo -->
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                  <a class="navbar-brand" href="#">
                        <img src="https://img0.baidu.com/it/u=4228009393,712063118&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="logo" style="width: 40px;">
                  </a>
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link">导航一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航二</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link">导航三</a>
                        </li>
                  </ul>
            </nav>

            <!-- 折叠带下拉按钮的导航栏 -->
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                  <a class="navbar-brand" href="#">
                        <img src="https://img0.baidu.com/it/u=4228009393,712063118&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="logo" style="width: 40px;">
                  </a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavbar">
                        <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="collapseNavbar">
                        <ul class="navbar-nav">
                              <li class="nav-item">
                                    <a class="nav-link">导航一</a>
                              </li>
                              <li class="nav-item">
                                    <a class="nav-link">导航二</a>
                              </li>
                              <li class="nav-item">
                                    <a class="nav-link">导航三</a>
                              </li>
                        </ul>
                  </div>
            </nav>

            <!-- 带下拉链接的导航栏 -->
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                  <a class="navbar-brand" href="#">
                        <img src="https://img0.baidu.com/it/u=4228009393,712063118&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="logo" style="width: 40px;">
                  </a>
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航二</a>
                        </li>
                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">导航三</a>
                              <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">下拉链接一</a>
                                    <a class="dropdown-item" href="#">下拉链接二</a>
                                    <a class="dropdown-item" href="#">下拉链接三</a>
                              </div>
                        </li>
                  </ul>
            </nav>

            <!-- 带搜索框导航栏 -->
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom dropup">
                  <a class="navbar-brand">
                        <img src="https://img0.baidu.com/it/u=4228009393,712063118&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="logo" style="width: 40px;">
                  </a>
                  <form class="form-inline">
                        <input class="form-control" type="text" placeholder="search">
                        <button class="btn btn-success" type="button">搜索</button>
                  </form>
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航二</a>
                        </li>
                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">导航三</a>
                              <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">下拉链接一</a>
                                    <a class="dropdown-item" href="#">下拉链接二</a>
                                    <a class="dropdown-item" href="#">下拉链接三</a>
                              </div>
                        </li>
                  </ul>
            </nav>
            <!-- 带小图标的导航栏 -->
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
                  <a class="navbar-brand">
                        <img src="https://img0.baidu.com/it/u=4228009393,712063118&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="logo" style="width: 40px;">
                  </a>
                  <form class="form-inline">
                        <div class="input-group">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">@</span>
                              </div>
                              <input class="form-control" type="text" placeholder="search">
                              <button class="btn btn-success" type="button">搜索</button>
                        </div>
                  </form>
                  <ul class="navbar-nav">
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航一</a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="#">导航二</a>
                        </li>
                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">导航三</a>
                              <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">下拉链接一</a>
                                    <a class="dropdown-item" href="#">下拉链接二</a>
                                    <a class="dropdown-item" href="#">下拉链接三</a>
                              </div>
                        </li>
                  </ul>
            </nav>
      </body>
</html>